/*
 * @Author: mikey.zhaopeng 
 * @Date: 2018-05-24 09:07:46 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-05-24 09:08:24
 */
<template>
    <div v-if="show" class="out">
        <div class="outPopup">
            <p class="outPopupTitle">是否确认退出？</p>
            <p class="outPopupButton">
                <span @click="onHid">取消</span>
                <span @click="getOut">确认</span>
            </p>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showModel() {
      this.$set(this, "show", true);
    },
    onHid() {
      this.$set(this, "show", false);
    },
    getOut() {
      this.$store.dispatch("LogOut").then(() => {
        this.$localStorage.remove("themeData");
        location.reload(); // 为了重新实例化vue-router对象 避免bug
      });
    }
  }
};
</script>

<style>
.out {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 1080px;
}
.outPopup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 624px;
  height: 354px;
  margin: auto;
  color: #2ff0d2;
  font-size: 28px;
  background: url("../../../static/img/bigData4/popmdpi.png") left top no-repeat;
}
.outPopupTitle{
    margin-bottom: 50px;
}
.outPopupButton {
  display: flex;
  justify-content: space-around;
  width: 80%;
}
.outPopupButton span {
  display: inline-block;
  width: 185px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  background: url("../../../static/img/bigData4/button_offmdpi.png") left top
    no-repeat;
  cursor: pointer;
}
.outPopupButton span:hover {
  color: #000;
  background: url("../../../static/img/bigData4/button_onmdpi.png") left top
    no-repeat;
}
</style>